/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="tab-buttons">
        <div class="tab-buttons-item" v-for="item in options" :key="radio_name + item.value">
            <input type="radio"
                   :id="radio_name + item.value"
                   :name="radio_name"
                   :value="item.value"
                   :checked="checkValue === item.value"
                   @change="changeTab($event, item.value)">
            <label class="tab-buttons-label"
                   :style="{'font-size': fontSize + 'px'}"
                   :for="radio_name + item.value">
                {{item.label}}
            </label>
        </div>
    </div>
</template>

<style lang="stylus">
    .tab-buttons
        font-size 0;

        .tab-buttons-item
            display inline-block;

            [type="radio"]
                display none;

                &:checked + .tab-buttons-label
                    background #4d8dd9 !important;
                    color: #fff !important;
                    border-color #4d8dd9 !important

            .tab-buttons-label
                margin 0;
                font-weight normal;
                display inline-block;
                padding 5px 25px;
                background #fff;
                border 1px solid #ccc;
                cursor pointer;
                font-size 14px;
                transition .3s all
            &:first-child
                .tab-buttons-label
                    border-top-left-radius 5px
                    border-bottom-left-radius 5px
                    border-right 0
            &:last-child
                .tab-buttons-label
                    border-top-right-radius 5px
                    border-bottom-right-radius 5px
                    border-left 0
</style>

<script>

    /**
     * Created by ued on 2017/3/28.
     * 不使用 v-model 的话默认以第一项为选中项
     * <tab-buttons v-model="xx_value" :fontSize="14" :options="list" @change="changeTabBtn"></tab-buttons>
     * list: [
     *      {label: 'CPU', value: 'cpu'},
     *      {label: _('内存'), value: 'mem'},
     *      {label: _('磁盘'), value: 'disk'}
     * ]
     *
     * changeTabBtn (value, oldValue) {...}
     *
     */

    import uuid from 'src/util/uuid';

    export default {
        props: {
            options: {
                type: Array,
                'default': () => []
            },

            fontSize: {
                type: Number,
                'default': 14
            },

            value: {}
        },

        data () {
            return {
                checkValue: this.value || (this.options[0] || {}).value
            };
        },

        computed: {
            radio_name () {
                return uuid('tab-button-');
            }
        },

        watch: {
            value (v) {
                this.checkValue = v;
            }
        },

        methods: {
            changeTab (e, value) {
                this.$emit('input', value);
                this.$emit('change', value, this.checkValue);

                this.checkValue = value;
            }
        }
    };

</script>
